﻿
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>CloudBOX | 文档</title>
      <link rel="shortcut icon" href="assets/images/logo_ico.png" type="img/png"/>
      <link rel="stylesheet" href="assets/css/backend.min.css">
      <link rel="stylesheet" href="assets/vendor/@fortawesome/fontawesome-free/css/all.min.css">
      <link rel="stylesheet" href="assets/vendor/line-awesome/dist/line-awesome/css/line-awesome.min.css">
      <link rel="stylesheet" href="assets/vendor/remixicon/fonts/remixicon.css">
      <link rel="stylesheet" href="assets/vendor/doc-viewer/include/pdf/pdf.viewer.css">
      <link rel="stylesheet" href="assets/vendor/doc-viewer/include/PPTXjs/css/pptxjs.css">
      <link rel="stylesheet" href="assets/vendor/doc-viewer/include/PPTXjs/css/nv.d3.min.css">
      <link rel="stylesheet" href="assets/vendor/doc-viewer/include/SheetJS/handsontable.full.min.css">
      <link rel="stylesheet" href="assets/vendor/doc-viewer/include/verySimpleImageViewer/css/jquery.verySimpleImageViewer.css">
      <link rel="stylesheet" href="assets/vendor/doc-viewer/include/officeToHtml/officeToHtml.css">
      <link rel="stylesheet" href="assets/vendor/notice/css/bs4.pop.css">
  </head>
  <body class="  ">
  <!-- 加载动画开始 -->
  <div id="loading">
      <div id="loading-center">
      </div>
  </div>
  <!-- 加载动画结束 -->

  <!-- 左侧导航栏开始 -->
  <div class="iq-sidebar  sidebar-default ">
      <div class="iq-sidebar-logo d-flex align-items-center justify-content-between">
          <a href="page-index.html" class="header-logo">
              <img src="assets/images/logo.png" class="img-fluid rounded-normal light-logo" alt="logo">
              <img src="assets/images/logo-white.png" class="img-fluid rounded-normal darkmode-logo" alt="logo">
          </a>
          <div class="iq-menu-bt-sidebar">
              <i class="las la-bars wrapper-menu"></i>
          </div>
      </div>
      <div class="data-scrollbar" data-scroll="1">
          <div class="new-create select-dropdown input-prepend input-append">
              <div class="btn-group">
                  <label data-toggle="dropdown">
                      <div class="search-query selet-caption"><i class="las la-plus pr-2"></i>操 作</div><span class="search-replace"></span>
                      <span class="caret"> </span>
                  </label>
                  <ul class="dropdown-menu">
                      <a href="upload-picture.html"><li><div class="item"><i class="ri-file-upload-line pr-3"></i>上传图片</div></li></a>
                      <a href="upload-document.html"><li><div class="item"><i class="ri-file-upload-line pr-3"></i>上传文档</div></li></a>
                      <a href="upload-audio.html"><li><div class="item"><i class="ri-file-upload-line pr-3"></i>上传音频</div></li></a>
                      <a href="upload-video.html"><li><div class="item"><i class="ri-file-upload-line pr-3"></i>上传视频</div></li></a>
                  </ul>
              </div>
          </div>
          <nav class="iq-sidebar-menu">
              <ul id="iq-sidebar-toggle" class="iq-menu">
                  <li class="">
                      <a href="page-index.html" class="">
                          <i class="las la-home iq-arrow-left"></i><span>主页</span>
                      </a>
                      <ul id="dashboard" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                      </ul>
                  </li>
                  <li class="active">
                      <a href="#mydrive" class="collapsed" data-toggle="collapse" aria-expanded="false">
                          <i class="las la-hdd"></i><span>空间</span>
                          <i class="las la-angle-right iq-arrow-right arrow-active"></i>
                          <i class="las la-angle-down iq-arrow-right arrow-hover"></i>
                      </a>
                      <ul id="mydrive" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                          <li class=" ">
                              <a href="page-picture.html">
                                  <i class="lab la-blogger-b"></i><span>图片</span>
                              </a>
                          </li>
                          <li class="active">
                              <a href="page-document.html">
                                  <i class="las la-share-alt"></i><span>文档</span>
                              </a>
                          </li>
                          <li class=" ">
                              <a href="page-audio.html">
                                  <i class="las la-icons"></i><span>音频</span>
                              </a>
                          </li>
                          <li class=" ">
                              <a href="page-video.html">
                                  <i class="las la-icons"></i><span>视频</span>
                              </a>
                          </li>
                      </ul>
                  </li>
                  <li class=" ">
                      <a href="page-message.html" class="">
                          <i class="lar la-file-alt iq-arrow-left"></i><span>发现</span>
                      </a>
                      <ul id="page-files" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                      </ul>
                  </li>
                  <li class=" ">
                      <a href="page-record.html" class="">
                          <i class="las la-stopwatch iq-arrow-left"></i><span>最近</span>
                      </a>
                      <ul id="page-folders" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                      </ul>
                  </li>
                  <li class=" ">
                      <a href="page-collection.html" class="">
                          <i class="lar la-star"></i><span>收藏</span>
                      </a>
                      <ul id="page-fevourite" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                      </ul>
                  </li>
                  <li class=" ">
                      <a href="page-trash.html" class="">
                          <i class="las la-trash-alt iq-arrow-left"></i><span>回收</span>
                      </a>
                      <ul id="page-delete" class="iq-submenu collapse" data-parent="#iq-sidebar-toggle">
                      </ul>
                  </li>
                  <li class=" ">
                      <a href="page-user.html">
                          <i class="las la-user-cog iq-arrow-left"></i><span>我的</span>
                      </a>
                  </li>
              </ul>
          </nav>

          <div class="p-3" id="space"></div>
      </div>
  </div>
  <!-- 左侧导航栏结束 -->


  <!-- 顶部导航栏开始 -->
  <div class="iq-top-navbar">
      <div class="iq-navbar-custom">
          <nav class="navbar navbar-expand-lg navbar-light p-0">
              <div class="iq-navbar-logo d-flex align-items-center justify-content-between">
                  <i class="ri-menu-line wrapper-menu"></i>
                  <a href="page-index.html" class="header-logo">
                      <img src="assets/images/logo.png" class="img-fluid rounded-normal light-logo" alt="logo">
                      <img src="assets/images/logo-white.png" class="img-fluid rounded-normal darkmode-logo" alt="logo">
                  </a>
              </div>

              <!-- 搜索开始 -->
              <div class="iq-search-bar device-search">
                  <form>
                      <div class="input-prepend input-append">
                          <div class="btn-group">
                              <label class="dropdown-toggle searchbox" data-toggle="dropdown">
                                  <input class="dropdown-toggle search-query text search-input" autocomplete="off" type="text" id="content" placeholder="搜索"><span class="search-replace"></span>
                                  <a class="search-link" href="javascript:void(0);" id="search"><i class="ri-search-line"></i></a>
                                  <span class="caret"></span>
                              </label>
                              <ul class="dropdown-menu">
                                  <li><a href="page-document.html?documentType=pdf"><div class="item"><i class="far fa-file-pdf bg-info"></i>PDF</div></a></li>
                                  <li><a href="page-document.html?documentType=doc"><div class="item"><i class="far fa-file-alt bg-primary"></i>DOC</div></a></li>
                                  <li><a href="page-document.html?documentType=xls"><div class="item"><i class="far fa-file-excel bg-success"></i>XLS</div></a></li>
                                  <li><a href="page-document.html?documentType=ppt"><div class="item"><i class="far fa-file-powerpoint bg-danger"></i>PPT</div></a></li>
                                  <li><a href="page-picture.html"><div class="item"><i class="far fa-file-image bg-warning"></i>Image</div></a></li>
                                  <li><a href="page-video.html"><div class="item"><i class="far fa-file-video bg-info"></i>Video</div></a></li>
                              </ul>
                          </div>
                      </div>
                  </form>
              </div>
              <!-- 搜索结束 -->

              <!-- 个人中心开始 -->
              <div class="d-flex align-items-center">
                  <div class="change-mode">
                      <div class="custom-control custom-switch custom-switch-icon custom-control-inline">
                          <div class="custom-switch-inner">
                              <p class="mb-0"> </p>
                              <input type="checkbox" class="custom-control-input" id="dark-mode" data-active="true">
                              <label class="custom-control-label" for="dark-mode" data-mode="toggle">
                                  <span class="switch-icon-left"><i class="a-left"></i></span>
                                  <span class="switch-icon-right"><i class="a-right"></i></span>
                              </label>
                          </div>
                      </div>
                  </div>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"  aria-label="Toggle navigation">
                      <i class="ri-menu-3-line"></i>
                  </button>
                  <div class="collapse navbar-collapse" id="navbarSupportedContent">
                      <ul class="navbar-nav ml-auto navbar-list align-items-center">
                          <li class="nav-item nav-icon search-content">
                              <a href="#" class="search-toggle rounded" id="dropdownSearch" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  <i class="ri-search-line"></i>
                              </a>
                              <div class="iq-search-bar iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownSearch">
                                  <form action="#" class="searchbox p-2">
                                      <div class="form-group mb-0 position-relative">
                                          <input type="text" class="text search-input font-size-12" placeholder="type here to search...">
                                          <a href="#" class="search-link"><i class="las la-search"></i></a>
                                      </div>
                                  </form>
                              </div>
                          </li>
                          <li class="nav-item nav-icon dropdown">
                              <a href="#" class="search-toggle dropdown-toggle" id="dropdownMenuButton02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
                                  <i class="ri-settings-3-line"></i>
                              </a>
                              <div class="iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownMenuButton02">
                                  <div class="card shadow-none m-0">
                                      <div class="card-body p-0 ">
                                          <div class="p-3">
                                              <a href="auth-lock-screen.html" class="iq-sub-card pt-0"><i class="ri-settings-3-line"></i>锁屏</a>
                                          </div>
                                          <div class="p-3">
                                              <a href="page-user.html" class="iq-sub-card pt-0"><i class="ri-settings-3-line"></i>个人中心</a>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </li>
                          <li class="nav-item nav-icon dropdown caption-content">
                              <a href="#" class="search-toggle dropdown-toggle" id="dropdownMenuButton03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
                                  <div class="caption bg-primary line-height">
                                      <img id="head1" style="width: 28px" src="">
                                  </div>
                              </a>
                              <div class="iq-sub-dropdown dropdown-menu" aria-labelledby="dropdownMenuButton03">
                                  <div class="card mb-0">
                                      <div class="card-header d-flex justify-content-between align-items-center mb-0">
                                          <div class="header-title">
                                              <h4 class="card-title mb-0">欢迎使用</h4>
                                          </div>
                                          <div class="close-data text-right badge badge-primary cursor-pointer "><i class="ri-close-fill"></i></div>
                                      </div>
                                      <div class="card-body">
                                          <div class="profile-header">
                                              <div class="cover-container text-center">
                                                  <div class="rounded-circle profile-icon bg-primary mx-auto d-block">
                                                      <a href="page-user.html">
                                                          <img id="head2" style="width: 66px;" src="">
                                                      </a>
                                                  </div>
                                                  <div class="profile-detail mt-3">
                                                      <h5><a href="page-user.html" id="username"></a></h5>
                                                  </div>
                                                  <p></p>
                                                  <a href="javascript:void(0);" id="exit" class="btn btn-primary">退出登录</a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </li>
                      </ul>
                  </div>
              </div>
              <!-- 个人中心结束 -->
          </nav>
      </div>
  </div>
  <!-- 顶部导航栏结束 -->


      <div class="content-page">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                     <div class="d-flex align-items-center justify-content-between welcome-content mb-3">
                        <div class="navbar-breadcrumb">
                           <nav aria-label="breadcrumb">
                              <ul class="breadcrumb">
                                 <li class="breadcrumb-item"><a href="page-index.html">主页</a></li>
                                  <li class="breadcrumb-item active" aria-current="page"><a href="page-document.html">文档</a></li>
                              </ul>
                           </nav>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="list-grid-toggle mr-4">
                                <span class="icon icon-grid i-grid"><i class="ri-layout-grid-line font-sizr-20"></i></span>
                                <span class="icon icon-grid i-list"><i class="ri-list-check font-sizr-20"></i></span>
                                <span class="label label-list">视图切换</span>
                            </div>
                        </div>
                     </div>
                </div>
            </div>


            <!-- 超大图片开始 -->
            <div class="icon icon-grid i-grid">
                <div class="row" id="fileView">




                </div>
            </div>
            <!-- 超大图片结束 -->


            <!-- 详细信息开始 -->
            <div class="icon icon-grid i-list">
                <div class="row">
                    <div class="col-lg-12">                        
                        <div class="card card-block card-stretch card-transparent">
                            <div class="card-header d-flex justify-content-between pb-0">
                                <div class="header-title">
                                    <h4 class="card-title">详细信息</h4>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12">
                        <div class="card card-block card-stretch card-height">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table mb-0 table-borderless tbl-server-info">
                                    <thead>
                                        <tr>
                                            <th scope="col">文档名称</th>
                                            <th scope="col">下载次数</th>
                                            <th scope="col">上传时间</th>
                                            <th scope="col">文档大小</th>
                                            <th scope="col"></th>
                                        </tr>
                                    </thead>
                                    <tbody id="fileDetail">


                                    </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 详细信息结束 -->


            <!-- 分页模块开始 -->
            <div class="pagination-wrap" style="margin-left: 450px">
                <ul class="pagination" id="pageNumber">
                    <!--<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a></li>-->
                    <!--<li class="page-item"><a class="page-link" href="#">1</a></li>-->
                    <!--<li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>-->
                    <!--<li class="page-item"><a class="page-link" href="#">3</a></li>-->
                    <!--<li class="page-item"><a class="page-link" href="#">下一页</a></li>-->
                </ul>
            </div>
            <!-- 分页模块结束 -->

        </div>
      </div>
    </div>

    <!-- 页脚开始 -->
    <footer class="iq-footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <ul class="list-inline mb-0">
                        <li class="list-inline-item"><a href="page-index.html">© www.gaoyiguan.cn - </a></li>
                        <li class="list-inline-item"><a href="page-index.html">网上云盘-毕设项目-高以官 © 版权所有</a></li>
                    </ul>
                </div>
                <div class="col-lg-6 text-right">
                    Copyright 2021 <a href="page-index.html">Cloud BOX</a> All Rights Reserved.
                </div>
            </div>
        </div>
    </footer>
    <!-- 页脚结束 -->
    <script src="assets/js/jquery-1.8.3.min.js"></script>
    <script src="assets/js/backend-bundle.min.js"></script>
    <script src="assets/js/customizer.js"></script>
    <script src="assets/js/chart-custom.js"></script>
    <script src="assets/vendor/doc-viewer/include/pdf/pdf.js"></script>
    <script src="assets/vendor/doc-viewer/include/docx/jszip-utils.js"></script>
    <script src="assets/vendor/doc-viewer/include/docx/mammoth.browser.min.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/filereader.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/d3.min.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/nv.d3.min.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/pptxjs.js"></script>
    <script src="assets/vendor/doc-viewer/include/PPTXjs/js/divs2slides.js"></script>
    <script src="assets/vendor/doc-viewer/include/SheetJS/handsontable.full.min.js"></script>
    <script src="assets/vendor/doc-viewer/include/SheetJS/xlsx.full.min.js"></script>
    <script src="assets/vendor/doc-viewer/include/verySimpleImageViewer/js/jquery.verySimpleImageViewer.js"></script>
    <script src="assets/vendor/doc-viewer/include/officeToHtml/officeToHtml.js"></script>
    <script src="assets/js/doc-viewer.js"></script>
    <script src="assets/js/app.js"></script>
    <script src="assets/vendor/notice/js/bs4.pop.js"></script>
    <script src="assets/vendor/notice/bootstrap-4.0.0-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">

        //云盘容量信息
        spaceInfo();

        //文件分页列表
        page(1, getUrlParam('documentType'));

        //用户信息
        userInfo();

        /**
         * 分页查询
         */
        function page(pageNum, content) {
            $.ajax({
                url: 'cloud-document/list',
                data: {
                    pageNum : pageNum,
                    pageSize : 16,
                    content: content
                },
                type: 'get',
                dataType: 'json',
                success: function (result) {
                    if (result.code == 200) {
                        $("#fileView").html("");
                        $("#fileDetail").html("");
                        $("#pageNumber").html("");

                        var documentList = result.data.cloudDocumentList;

                        if (documentList.length == 0) {
                            appendNoSearch();
                            return;
                        }

                        appendFileViewTitle();
                        for (var i = 0; i < documentList.length; i++) {
                            let document = documentList[i];
                            if (document.documentBan == 0) {
                                appendFileView(document);
                                appendFileDetail(document);
                            }else {
                                appendBanFileView(document);
                                appendBanFileDetail(document);
                            }
                        }

                        pageNumber(result.data);
                    }
                }
            });

            if (getUrlParam('documentType') != null) {
                $("#content").val(getUrlParam('documentType'));
            }
        };

        /**
         * 分页逻辑
         */
        function pageNumber(data) {
            var pageCount = data.pageCount;
            var pageNum = data.pageNum;
            var number = 1;
            if (pageNum <= 1) {
                $("#pageNumber").append("<li class=\"page-item disabled\"><a class=\"page-link\" tabindex=\"-1\" aria-disabled=\"true\">上一页</a></li>");
            }else {
                $("#pageNumber").append("<li class=\"page-item\"><a class=\"page-link\" href=\"javascript:void(0);\" onclick='page("+ (pageNum - number) +", getSearchContent())'>上一页</a></li>");
            }

            for (var i = 1; i <= pageCount; i++) {
                if (i == pageNum) {
                    $("#pageNumber").append("<li class=\"page-item active\" aria-current=\"page\"><a class=\"page-link\" href=\"javascript:void(0);\">"+ i +"</a></li>");
                }else {
                    $("#pageNumber").append("<li class=\"page-item\"><a class=\"page-link\" onclick='page("+ i +", getSearchContent())' href=\"javascript:void(0);\">"+ i +"</a></li>");
                }
            }

            if (pageNum >= pageCount) {
                $("#pageNumber").append("<li class=\"page-item disabled\"><a class=\"page-link\" tabindex=\"-1\" aria-disabled=\"true\">下一页</a></li>");
            }else {
                $("#pageNumber").append("<li class=\"page-item\"><a class=\"page-link\" href=\"javascript:void(0);\" onclick='page("+ (pageNum + number) +", getSearchContent())'>下一页</a></li>");
            }
        };

        /**
         * 拼接超大视图标题信息
         */
        function appendFileViewTitle() {
            $("#fileView").append("<div class=\"col-lg-12\">\n" +
                "                        <div class=\"card card-block card-stretch card-transparent\">\n" +
                "                            <div class=\"card-header d-flex justify-content-between pb-0\">\n" +
                "                                <div class=\"header-title\">\n" +
                "                                    <h4 class=\"card-title\">超大视图</h4>\n" +
                "                                </div>\n" +
                "                            </div>\n" +
                "                        </div>\n" +
                "                    </div>");
        };

        /**
         * 拼接超大视图列表数据
         */
        function appendFileView(item) {
            $("#fileView").append("<div class=\"col-lg-3 col-md-6 col-sm-6\">\n" +
                "                        <div class=\"card card-block card-stretch card-height\">\n" +
                "                            <div class=\"card-body image-thumb\">\n" +
                "                                <div class=\"mb-4 text-center p-3 rounded iq-thumb\">\n" +
                "                                    <div class=\"iq-image-overlay\"></div>\n" +
                "                                    <a href=\"#\" data-title=\""+ item.documentName +"\" data-load-file=\"file\" data-load-target=\"#resolte-contaniner\" data-url=\""+ item.documentUrl +"\" data-toggle=\"modal\" data-target=\"#exampleModal\"><img src=\""+ item.documentImg +"\" class=\"img-fluid\" alt=\""+ item.documentName +"\"></a>\n" +
                "                                </div>\n" +
                "                                <h6>"+ item.documentName +"</h6> \n" +
                "                            </div>\n" +
                "                        </div>\n" +
                "                    </div>");
        };

        /**
         * 拼接详细信息列表数据
         */
        function appendFileDetail(item) {
            $("#fileDetail").append("<tr>\n" +
                "                                            <td>\n" +
                "                                                <div class=\"d-flex align-items-center\">\n" +
                "                                                    <div class=\"mr-3\">\n" +
                "                                                        <a>\n" +
                "                                                            <img src=\""+ item.documentImg +"\" class=\"img-fluid avatar-30\">\n" +
                "                                                        </a>\n" +
                "                                                    </div>\n" +
                "                                                    <span id=\""+ item.id +"\" type=\""+ item.documentType +"\">"+ item.documentName +"</span>\n" +
                "                                                </div>\n" +
                "                                            </td>\n" +
                "                                            <td>"+ item.documentDownload +"</td>\n" +
                "                                            <td>"+ item.documentTime +"</td>\n" +
                "                                            <td>"+ item.documentSize +"</td>\n" +
                "                                            <td>\n" +
                "                                                <div class=\"dropdown\">\n" +
                "                                                    <span class=\"dropdown-toggle\" data-toggle=\"dropdown\">\n" +
                "                                                        <i class=\"ri-more-fill\"></i>\n" +
                "                                                    </span>\n" +
                "                                                    <div class=\"dropdown-menu dropdown-menu-right\">\n" +
                "                                                        <a class=\"dropdown-item\" href=\"javascript:void(0);\" onclick=\"edit(this)\"><i class=\"ri-pencil-fill mr-2\"></i>编辑</a>\n" +
                "                                                        <a class=\"dropdown-item\" href=\"javascript:void(0);\" fileId='"+ item.id +"'  onclick='collection(this)'><i class=\"ri-heart-add-fill mr-2\"></i>收藏</a>\n" +
                "                                                        <a class=\"dropdown-item\" href=\"javascript:void(0);\" fileId=\""+ item.id +"\" onclick=\"deleteFile(this)\"><i class=\"ri-delete-bin-6-fill mr-2\"></i>删除</a>\n" +
                "                                                        <a class=\"dropdown-item\" href=\"javascript:void(0);\" fileId=\""+ item.id +"\" onclick=\"downloadFile(this)\"><i class=\"ri-file-download-fill mr-2\"></i>下载</a>\n" +
                "                                                    </div>\n" +
                "                                                </div>\n" +
                "                                            </td>\n" +
                "                                        </tr>");
        };

        /**
         * 拼接封禁超大视图列表数据
         */
        function appendBanFileView(item) {
            $("#fileView").append("<div class=\"col-lg-3 col-md-6 col-sm-6\">\n" +
                "                        <div class=\"card card-block card-stretch card-height\">\n" +
                "                            <div class=\"card-body image-thumb \">\n" +
                "                                <div class=\"mb-4 text-center p-3 rounded iq-thumb\">\n" +
                "                                    <a title=\""+ item.documentName +"(已被封禁)\" class=\"image-popup-vertical-fit\" href=\""+ item.documentImg +"\">\n" +
                "                                        <img src=\""+ item.documentImg +"\" class=\"img-fluid\" alt=\"images\" />\n" +
                "                                        <div class=\"iq-image-overlay\"></div>\n" +
                "                                    </a>           \n" +
                "                                </div>\n" +
                "                                <h6>"+ item.documentName +"(已被封禁)</h6>\n" +
                "                            </div>\n" +
                "                        </div>\n" +
                "                    </div>");
        };

        /**
         * 拼接封禁详细信息列表数据
         */
        function appendBanFileDetail(item) {
            $("#fileDetail").append("<tr>\n" +
                "                                            <td>\n" +
                "                                                <div class=\"d-flex align-items-center\">\n" +
                "                                                    <div class=\"mr-3\">\n" +
                "                                                        <a>\n" +
                "                                                            <img src=\""+ item.documentImg +"\" class=\"img-fluid avatar-30\">\n" +
                "                                                        </a>\n" +
                "                                                    </div>\n" +
                "                                                    <span id=\""+ item.id +"\" type=\""+ item.documentType +"\">"+ item.documentName +"(已被封禁)</span>\n" +
                "                                                </div>\n" +
                "                                            </td>\n" +
                "                                            <td>"+ item.documentDownload +"</td>\n" +
                "                                            <td>"+ item.documentTime +"</td>\n" +
                "                                            <td>"+ item.documentSize +"</td>\n" +
                "                                            <td>\n" +
                "                                                <div class=\"dropdown\">\n" +
                "                                                    <span class=\"dropdown-toggle\" data-toggle=\"dropdown\">\n" +
                "                                                        <i class=\"ri-more-fill\"></i>\n" +
                "                                                    </span>\n" +
                "                                                    <div class=\"dropdown-menu dropdown-menu-right\">\n" +
                "                                                        <a class=\"dropdown-item\" href=\"javascript:void(0);\" onclick=\"edit(this)\"><i class=\"ri-pencil-fill mr-2\"></i>编辑</a>\n" +
                "                                                        <a class=\"dropdown-item\" href=\"javascript:void(0);\" fileId=\""+ item.id +"\" onclick=\"deleteFile(this)\"><i class=\"ri-delete-bin-6-fill mr-2\"></i>删除</a>\n" +
                "                                                        <a class=\"dropdown-item\"><i class=\"ri-file-download-fill mr-2\"></i>禁止下载</a>\n" +
                "                                                    </div>\n" +
                "                                                </div>\n" +
                "                                            </td>\n" +
                "                                        </tr>");
        };

        /**
         * 未查询到结果展示页面
         */
        function appendNoSearch() {
            $("#fileView").append("<div style=\"margin: 0 auto\">\n" +
                "                        <img src=\"assets/images/search1.gif\" width=\"520px\">\n" +
                "                    </div>");
            $("#fileDetail").html("<div style=\"margin: 0 auto\">\n" +
                "                        <img src=\"assets/images/search1.gif\" width=\"520px\">\n" +
                "                    </div>");
        };

        /**
         * 搜索单击事件
         */
        $("#search").click(function () {
            page(1, $("#content").val());
        });

        /**
         * 获取搜索框数据
         */
        function getSearchContent() {
            if ($("#content").val() != null && $("#content").val() != ' ') {
                return $("#content").val();
            }
            return null;
        };

        /**
         * 查询云盘空间信息
         */
        function spaceInfo() {
            $.ajax({
                url: 'cloud-space/info',
                type: 'get',
                dataType: 'json',
                success: function (result) {
                    if (result.code == 200) {
                        var data = result.data;
                        var percent = data.percent;
                        $("#space").before("");
                        var str = "<div class=\"sidebar-bottom\">\n" +
                            "         <h4 class=\"mb-3\"><i class=\"las la-cloud mr-2\"></i>网上云盘</h4>\n" +
                            "         <p>"+ data.usedSize +" / "+ data.totalSize +" 容量</p>\n" +
                            "         <div class='progress'>" +
                            "            <div class='progress-bar progress-bar-striped' role='progressbar' style='width: "+ percent +"%;' aria-valuenow='"+ percent +"' aria-valuemin='0' aria-valuemax='100'></div>"+
                            "         </div>" +
                            "         <p style='margin-top: 10px'>"+ percent +"% - "+ data.surplusSize +" 剩余</p>\n" + "</div>";
                        $("#space").before(str);

                    }
                }
            });
        };


        /**
         * 编辑按钮 单击事件
         * @param editObj
         */
        function edit(editObj) {
            bs4pop.confirm('你确定要修改文档名称吗？', function(sure){

                if (sure == false) return;

                let tr = $(editObj).parent().parent().parent().parent();
                let td = tr.children()[0];
                let div = $(td).children()[0];
                let span = $(div).children()[1];
                let filename = $(span).text();
                filename = filename.split(".")[0];
                $(span).html("<input type='text' class='form-control form-control-sm' name='filename' onblur='editSubmit(this)' value='"+ filename +"'/>");
            });
        };

        /**
         * 修改名称事件
         * @param filenameObj
         */
        function editSubmit(filenameObj) {
            let newFilename = $(filenameObj).val();
            newFilename = newFilename.split(".")[0];
            let span = $(filenameObj).parent();
            let id = $(span).attr("id");
            let type = $(span).attr("type");
            let filename = newFilename + "." + type;

            $.ajax({
                url: 'cloud-document/update',
                data: {
                    fileId: id,
                    fileName: filename
                },
                type: 'put',
                dataType: 'json',
                success: function (result) {
                    if (result.code == 200) {
                        $(span).html(filename);
                        bs4pop.notice("修改文档名称成功！", {type: 'success', position: 'center'});
                    }
                }

            });
        };

        /**
         * 收藏
         */
        function collection(obj) {
            bs4pop.confirm('你确定要收藏文档吗？', function(sure) {

                if (sure == false) return;

                let fileId = $(obj).attr("fileId");
                $.ajax({
                    url: 'cloud-collection/add',
                    data: {
                        fileId: fileId,
                        fileType : 2
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (result) {
                        if (result.code == 200) {
                            bs4pop.notice("添加收藏成功！", {type: 'success', position: 'center'});
                        }else {
                            bs4pop.notice(result.message, {type: 'danger', position: 'center'});
                        }
                    }
                });
            });
        };

        /**
         * 删除
         * @param obj
         */
        function deleteFile(obj) {
            bs4pop.confirm('你确定要删除文档吗？', function(sure){

                if (sure == false) return;

                let fileId = $(obj).attr("fileId");
                $.ajax({
                    url: 'cloud-document/delete',
                    data: {
                        documentId: fileId
                    },
                    type: 'delete',
                    dataType: 'json',
                    success: function (result) {
                        if (result.code == 200) {
                            let tr = $(obj).parent().parent().parent().parent();
                            $(tr).remove();
                            bs4pop.notice("删除文档成功！", {type: 'success', position: 'center'});
                        }
                    }
                });
            });
        };


        /**
         * 下载
         * @param obj
         */
        function downloadFile(obj) {
            let fileId = $(obj).attr("fileId");
            var form = $("<form>");   //定义一个form表单
            form.attr('style','display:none');   //下面为在form表单中添加查询参数
            form.attr('target','');
            form.attr('method','post');
            form.attr('action',"cloud-document/download");
            var input = $('<input>');
            input.attr('type','hidden');
            input.attr('name','fileId');
            input.attr('value',fileId);
            $('body').append(form);  //将表单放置在web中
            form.append(input);   //将查询参数控件提交到表单上
            form.submit();   //表单提交

            let tr = $(obj).parent().parent().parent().parent();
            let td = tr.children()[1];
            let download = $(td).text();
            var count = parseInt(download) + 1;
            $(td).html(count);
        };




        /**
         * 退出登录
         */
        $("#exit").click(function () {
            bs4pop.confirm('你确定要退出登录吗？', function(sure){
                if (sure == false) return;

                $.ajax({
                    url: 'cloud-user/exit',
                    type: 'delete',
                    dataType: 'json',
                    success: function (result) {
                        if (result.code == 200) {
                            location.href = 'auth-sign-in.html';
                        }
                    }
                });
            });
        });

        /**
         * 用户信息
         */
        function userInfo() {
            $.ajax({
                url: 'cloud-user/welcome',
                type: 'get',
                dataType: 'json',
                success:function (result) {
                    if (result.code == 200) {
                        let user = result.data;
                        $("#username").html(user.name);
                        $("#head1").prop("src", user.picPath);
                        $("#head2").prop("src", user.picPath);
                    }
                }
            });
        };

        //获取url中的参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        };

    </script>
      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <h4 class="modal-title">标题</h4>
                      <div>
                          <a class="btn" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                          </a>
                      </div>
                  </div>
                  <div class="modal-body">
                      <div id="resolte-contaniner" style="height: 500px;" class="overflow-auto">
                          文档未找到.
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </body>
</html>